<section class="ev-sm-container ev-view ">
    <div class="row">
        <div class="col s12 m12">
            <div class=" ev-card-panel ev-z-depth-5 ">
                <div class="loader-container card-loader-container" id="loader" ng-show="featured_challenge.isExistLoader" class="fade">
                    <div class="loader">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div class="ev-md-container ev-panel-title" ng-if="featured_challenge.page.leaderboard_description">
                    <div class="row">
                        <div class="col xs12 s12">
                            <strong>Description</strong>
                        </div>
                        <div class="col s12 md-body-1" mathjax-bind="featured_challenge.page.leaderboard_description"></div>
                    </div>
                </div>
                <div class="ev-md-container ev-panel-title">
                    <div class="row">
                        <div class="col s12">
                            <strong>Please select from following phases</strong>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col xs12 s6">
                            <span><md-select ng-model="featured_challenge.phase_name" placeholder="Challenge Phase" class="rm-margin">
                            <md-option ui-sref="featured-challenge-page.phase-leaderboard({phaseSplitId:key.id})" value="{{key.id}}" ng-repeat="key in featured_challenge.phaseSplits" ng-show="{{key.visibility}}==3"><span class="font-weight-b">Phase: </span>{{key.challenge_phase_name}}, <span class="font-weight-b">Split: </span> {{key.dataset_split_name}}</md-option>
                        </md-select></span>
                        </div>
                    </div>
                </div>
                <div class=" ev-card-body exist-team-card">
                    <div class="row">
                        <div class="horizontal-scroll">
                            <div class="col s12">
                                <div ng-if="!featured_challenge.isResult" class="result-wrn">No phase selected.</div>
                                <table ng-if="featured_challenge.isResult && featured_challenge.leaderboard.length" class="highlight">
                                    <thead>
                                        <tr>
                                            <td class="align-left" data-field="rank">Rank</td>
                                            <td class="align-left" data-field="team">Participant Team</td>
                                            <td class="align-right" ng-repeat="key in featured_challenge.leaderboard[0].leaderboard__schema.labels">{{key}}</td>
                                            <td class="align-right" data-field="submission_time">Last Submission at</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="key in featured_challenge.leaderboard">
                                            <td class="align-left">{{$index+1}}</td>
                                            <td class="font-weight-b align-left">{{key.submission__participant_team__team_name}}</td>
                                            <td class="align-right" ng-repeat="(i, score) in key.result track by $index">{{score | number : 2}}<span ng-if = "key.error != nil">±{{key.error[i] | number : 2}}</span></td>
                                            <td class="align-right"> {{key.submission__submitted_at | number: 0}}&nbsp; {{key.timeSpan}} ago</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div ng-if="featured_challenge.isResult && featured_challenge.leaderboard.error">
                                    <p>{{featured_challenge.leaderboard.error.error}}</p>
                                </div>
                                <div ng-if="featured_challenge.isResult && !featured_challenge.leaderboard.length && !featured_challenge.leaderboard.error">
                                    <p>No results to show!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
